<template>
  <div class="account_wrapper">
    <account-card :title="accountTitle"/>
    <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="70px" class="account_change_pass">
      <el-form-item label="原密码" prop="oldPass">
        <el-input type="password" v-model="formData.oldPass"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="pass">
        <el-input type="password" v-model="formData.pass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="formData.checkPass" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item>
        <div style="width: 100%">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </div>

      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  import AccountCard from "./components/AccountCard"
  import {changePassWord} from "@/api/service"

  export default {
    name: "",
    components: {
      AccountCard
    },
    inject: ['userInfo'],
    data() {
      const validateOldPass = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('原密码不能为空'));
        }
        callback();
      }
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新密码'));
        } else {
          if (this.formData.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };

      const validateCheckPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.formData.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };

      return {
        formData: {
          oldPass: '',
          pass: '',
          checkPass: ''
        },
        rules: {
          oldPass: [{validator: validateOldPass, trigger: 'blur'}],
          pass: [{validator: validatePass, trigger: 'blur'}],
          checkPass: [{validator: validateCheckPass, trigger: 'blur'}],
        }
      }
    },
    computed: {
      accountTitle() {
        return `当前账号 : ${this.userInfo.mobile}`
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            const {oldPass, pass} = this.formData;
            let params = {
              newPassword: pass,
              password: oldPass
            }
            const result = await changePassWord(params);
            this.handleResult(result, () => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
            })
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped lang="scss">
  .account_wrapper {
    .account_change_pass {
      width: 50%;
      min-width: 380px;
      margin: 35px auto 0;
    }
  }

</style>